<template>
  <div class="detail-bottom">
    <div class="chat">
      <van-icon name="chat-o" size="18px" />
      <div>客服</div>
    </div>
    <div class="cart" @click="toCart">
      <van-icon name="cart-o" size="18px" />
      <div>购物车</div>
    </div>
    <div class="chat">
      <van-icon name="star-o" size="18px"/>
      <div>收藏</div>
    </div>
    <div class="btn">
      <van-button
        type="primary"
        color="linear-gradient(to right, #ffd01e, #ff8917)"
        @click="addToCart"
        >加入购物车</van-button
      >
      <van-button
        type="primary"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        >立即购买</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button } from "vant";

Vue.use(Icon);
Vue.use(Button);
export default {
  name: "",
  methods: {
    toCart() {
      this.$router.push("/cart");
    },
    addToCart() {
      this.$emit("addCart");
    }
  },
};
</script>

<style scoped>
.detail-bottom {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: sticky;
  bottom: 0;
  z-index: 999999;
  background-color: #fff;
}

.cart,
.chat {
  font-size: 12px;
  padding: 0 12px;
  text-align: center;
}

.van-button {
  height: 50px;
}
</style>